<!DOCTYPE html>
<html>

<body>
    <script type="text/javascript" src="../common/echarts.min.js"></script>
    <script type="text/javascript" src="../common/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="../common/index.css">
    <title>立体库实时库位利用率看板</title>
    <script type="text/javascript">
        var myBarEcharts = null;
        var myPieEcharts = null;
        var data = [];
        var total = 0;
        const fetchData = () => {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: '/les/BillboardReportController/getStereoLibraryUtilBoard',
                    type: 'GET',
                    dataType: 'json',
                    success: function (res) {
                        if (res.retCode === '200') {
                            total = res.responseBody.reduce((acc, cur) => acc + cur.occupy, 0);
                            resolve(res.responseBody);
                        } else {
                            reject(new Error(res.message));
                        }
                    },
                    error: function (xhr, status, error) {
                        reject(error);
                    }
                });
            });
        };

        window.onload = function () {
            // 获取巷道
            fetchData()
                .then(processList => {
                    myBar(processList);
                    myPie(processList);
                })
                .catch(err => {
                    console.error('获取数据失败:', err);
                });
            setInterval(function () {
                fetchData()
                    .then(processList => {
                        updateMyBar(processList);
                        updateMyPie(processList);
                    })
                    .catch(err => {
                        console.error('获取数据失败:', err);
                    });
            }, 10000);
        }
        function myBar(data) {
            myBarEcharts = echarts.init(document.getElementById('myBar'));
            var option = {
                title: {
                    text: '实时利用率',
                    left: 'center', // 标题居中
                    textStyle: {
                        color: '#fff', // 设置标题颜色为红色
                    }
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.roadway),
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        color: '#fff',
                        fontSize: 12,
                    }
                },
                yAxis: {
                    type: 'value',
                    show: false
                },
                series: [
                    {
                        data: data.map(item => (item.occupy / item.total * 100).toFixed(2)),
                        type: 'bar',
                        barWidth: 40,
                        label: {
                            show: true, // 显示标签
                            position: 'top', // 标签位置（top, inside, bottom, left, right 等）
                            color: '#fff', // 标签颜色
                            fontSize: 12, // 字体大小
                            formatter: function (value) {
                                console.log(value);
                                return value.data + '%';
                            }
                        }
                    }
                ]
            };
            myBarEcharts.setOption(option);
        }
        function updateMyBar(data) {
            myBarEcharts.setOption({
                series: [{
                    data: data.map(item => (item.occupy / item.total * 100).toFixed(2))
                }]
            });
        }
        function myPie(data) {
            const pieData = data.map(item => ({
                name: item.roadway,
                value: item.occupy
            }));
            myPieEcharts = echarts.init(document.getElementById('myPie'));
            var option = {
                title: {
                    text: '占用货位总数:' + total,
                    left: 'center',
                    textStyle: {
                        color: '#fff', // 设置标题颜色为红色
                    },
                    padding: [0, 0, 20, 0]
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '5%',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [{
                    name: '占用货位总数',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    padAngle: 5,
                    itemStyle: {
                        borderRadius: 10,
                        normal: {
                            label: {
                                show: true,
                                formatter: "{b}: {c}",
                                position: "inner",
                                color: '#fff'
                            }
                        }
                    },
                    label: {
                        show: false,
                        position: 'center',
                        formatter: '{c}%', // 显示数据值，{c} 是默认的数据值占位符
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: pieData
                }]
            };
            myPieEcharts.setOption(option);
        }
        function updateMyPie(data) {
            const pieData = data.map(item => ({
                name: item.roadway,
                value: item.occupy
            }));
            myPieEcharts.setOption({
                title: {
                    text: '占用货位总数:' + total
                },
                series: [{
                    data: pieData
                }]
            });
        }
    </script>
    <style>
        .title {
            color: #68d8fe;
            display: flex;
            justify-content: center;
            font-size: 3vw;
            padding-top: 1vw;
        }

        .echart {
            display: flex;
            align-items: center;
            height: 81%;
            margin-top: 5vw;

        }

        #myBar {
            width: 60%;
            height: 100%;
        }

        #myPie {
            width: 40%;
            height: 100%;
        }
    </style>
    <div class="main">
        <div class="title">立体库实时库位利用率看板</div>
        <div class="echart">
            <div id="myBar" style="width: 60%; height: 100%;"></div>
            <div id="myPie" style="width: 40%; height: 100%;"></div>
        </div>
    </div>
</body>

</html>